const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin, default: loader } = require("vue-loader");
const path = require('path');
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.(t|j)s$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                    }
                }
                // loader: 'ts-loader',
                // options:{
                //     appendTsSuffixTo: [/\.vue$/]
                // }
            },
            {
                test: /\.vue$/,
                use: "vue-loader"
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader, 
                    "css-loader", 
                    "postcss-loader", 
                    "sass-loader"
                ]
            },
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                type: 'asset',
                generator: {
                    filename: "images/[name]-[hash][ext]",
                }
            },
            {
                test: /\.(eot|svg|ttf|woff2?|)$/,
                type: "asset/resource",
                generator: {
                    filename: "fonts/[name]-[hash][ext]",
                },
            },

        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '开发环境',
            template: './index.html'
        }),
        new VueLoaderPlugin()
    ],
    resolve: {
        extensions: ['.vue', '.ts', '...'], // '...'是添加之前默认的
        alias: {
            "@": path.resolve(__dirname, '../src')
        }
    },
    cache: {
        type: "filesystem"
    },
    
}